<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .rotor {
        display: block;
        position: absolute;
        width: 10%;
        padding-bottom: 10%;
        left: 45%;
        top: 45%;
        /*animation: rotato 1s infinite linear;*/
        /*-webkit-animation: rotato 4s infinite ease-in-out alternate;*/
    }
    .beam {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .beam:after {
        display: block;
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background-image: linear-gradient(45deg, transparent 40%, #388 41%);
        border-radius: 10%;
        transform: rotate(45deg);
        animation: twinkle 1s infinite alternate ease-out;
        -webkit-animation: twinkle 1s infinite alternate ease-out;
    }
    .north {
        transform: rotate(270deg) scaleY(0.5);
    }
    .northwest {
        transform: rotate(198deg) scaleY(0.5);
    }
    .northeast {
        transform: rotate(342deg) scaleY(0.5);
    }
    .west {
        transform: rotate(126deg) scaleY(0.5);
    }
    .east {
        transform: rotate(54deg) scaleY(0.5);
    }
    @keyframes twinkle {
        0% {
            border-radius: 5px;
        }
        100% {
            border-radius: 50px;
        }
    }
    @-webkit-keyframes twinkle {
        0% {
            border-radius: 5px;
        }
        100% {
            border-radius: 50px;
        }
    }
    @keyframes rotato {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(72deg);
        }
    }
    @-webkit-keyframes rotato {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(72deg);
        }
        100% {
            transform: rotate(-72deg);
        }
    }
</style>
<body>
<div class="rotor">
    <div class="north beam"></div>
    <div class="northwest beam"></div>
    <div class="northeast beam"></div>
    <div class="west beam"></div>
    <div class="east beam"></div>
</div>
</body>
</html>
